<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";
import {AGREEMENT} from "~/const/agreement";

const formRef=ref<FormInstance>()
const login=useLoginStore()
const router=useRouter();
const rules=reactive<FormRules>({
  agree:[{required:true,message:'请同意用户协议',trigger:'blur'},
    {validator:(rule, value, callback)=>{
      if(!value){
        callback(new Error('请同意用户协议'))
      }else{
        callback()
      }
    },trigger:'blur'
    }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  password1: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    {validator:(rule, value, callback)=>{
        if(value!==form.password){
          callback(new Error('两次密码不一致'))
        }else{
          callback()
        }
      },trigger:'blur'
    }
  ],
  qq: [
    { required: true, message: '请输入QQ', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {validator:(rule, value, callback)=>{
        if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
          callback(new Error('邮箱格式不正确'))
        }else{
          callback()
        }
      },trigger:'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {validator:(rule, value, callback)=>{
        if(!/^1[3456789]\d{9}$/.test(value)){
          callback(new Error('手机号格式不正确'))
        }else{
          callback()
        }
      },trigger:'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ],
})
const form = reactive({
  agree:false,
  username: '',
  password: '',
  password1:'',
  qq:'',
  email:'',
  phone:'',
  code:'',
  random_str:'',
  sms_type:'',
})
const {data:random,refresh}=await useServerGet('/tools/getRandomCode')
const submit=()=>{
  formRef.value?.validate(async (valid,invalidFields) => {
    if (valid) {
      form.random_str=random?.value?.data?.random_str;
      const {data,code}=await usePost('/user/register',form);
      debugger
      if(code==200){
        formRef.value?.resetFields();
        formRef.value?.clearValidate();
        // login.setToken(data?.token);
        // login.setInfo(data?.user);
        ElMessage.success('注册成功');
        router.push('/index.html');
      }else{
        refresh&&refresh();
      }
    } else {
      showFieldsError(invalidFields);
    }

  });
}
watchEffect(()=>{
  if(form.email.includes('@qq.com')){
    form.qq=form.email.split('@qq.com')[0];
  }
})
</script>

<template>
  <div>
    <div class="w-[1200px] mx-auto my-5">
      <el-card class="my-register h-[630px]">
        <div class="grid grid-cols-2 gap-10">
          <div>
            <div class="h-full">
              <img src="/imgs/reg_bg.jpeg" alt="注册图片" class="h-2/3">
            </div>
          </div>
          <div class="w-4/5">
            <div class="text-xl py-4 flex">
              <div class="text-[var(--el-color-primary)] text-3xl" >欢迎注册蓝名</div>
            </div>
              <el-form class="bg-white" label-suffix="：" label-width="120" size="large" :model="form" ref="formRef" :rules="rules">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email"  clearable placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="qq" prop="qq">
                  <el-input v-model="form.qq"  clearable placeholder="请输入qq"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone"  clearable placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <div class="flex w-full">
                    <el-input type="password" v-model="form.password" clearable placeholder="请输入密码"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="确认密码" prop="password1">
                  <el-input type="password" v-model="form.password1" clearable placehold="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="flex w-full">
                    <el-input v-model="form.code" class="w-3/5" clearable  placeholder="请输入验证码" size="large"></el-input>
                    <img :src="random?.data?.random_code_img" class="h-10 ml-2" @click="refresh" alt="随机码"/>
                  </div>
                </el-form-item>
                <el-form-item prop="agree">
                  <el-checkbox v-model="form.agree">我已阅读并同意<NuxtLink :to="AGREEMENT.用户服务协议"><el-button text size="small"><span class="text-blue-400">《用户服务协议》</span></el-button></NuxtLink>和<NuxtLink :to="AGREEMENT.隐私服务协议"><el-button text size="small"><span class="text-blue-400">《隐私服务协议》</span></el-button></NuxtLink></el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submit" size="large">注册</el-button>
                </el-form-item>
              </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>